<template>
	<div class="content55 page-main-content">
		<header class="header">
			<div @click="$router.go(-1)" class="left iconfont icon-left"></div>
			<div class="title">Chữ ký</div>
		</header>
		<div class="box">
			<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth"
				:lineColor="lineColor" v-model:bgColor="bgColor" />
		</div>
		<div class="flex-row">
			<div class="topup del" @click="handleReset">Xoá</div>
			<div class="topup" @click="handleGenerate">Đề xuất</div>
		</div>
		<div style="color: #999;font-size: 14px;padding: 0 20px;">Nhập chữ ký viết tay sau khi xác nhận rằng không có lỗi trong đầu vào. Sau khi đi qua, hắn có thể thuận lợi vay tiền.!</div>
	</div>
</template>

<script>
	import AJAX from '@/utils/http';
	import vueEsign from 'vue-esign';
	import { ElMessage } from 'element-plus'
	export default {
		components: {
			vueEsign,
		},

		data() {
			return {
				lineWidth: 6,
				lineColor: '#000000',
				bgColor: '',
				isCrop: false
			};
		},
		methods: {
			handleReset() {
				this.$refs.esign.reset()
			},
			handleGenerate() {
				this.$refs.esign.generate().then(res => {
					AJAX.post('/user/sub', {
						money: this.$route.query.amount,
						esign: res,
						month: this.$route.query.months,
					}).then(e => {
						if (!e.code) {
							// this.$toast(e.msg);
							ElMessage.error(e.msg);
							return;
						}
						this.$alert(e.msg, "Ok", {
						     confirmButtonText: "Ok",
						     callback: action => {
						       this.$router.replace('/user/index');
						     }
						});
						// this.$alert(e.msg, 'Ok', () => {
						// 	this.$router.replace('/user/index');
						// });
					})
				}).catch(err => {
					ElMessage.error('Không thể nộp trước khi ký');
					// this.$toast('Không thể nộp trước khi ký');
					return; // 画布没有签字时会执行这里 'Not Signned'
				});
			}
		}
	};
</script>

<style scoped>
	.box {
		margin: 12px;
		background-color: #fff;
	}

	.flex-row {
		gap: 8px;
		margin: 12px;
		margin-top: 0;
	}

	.flex-row .topup {
		flex: 1;
		margin-top: 0;
	}

	.flex-row .topup.del {
		background: var(--red-color);
	}
</style>